<template>
  <div>
    <el-input v-model="likeName" prefix-icon="el-icon-search" placeholder="请输入搜索内容" style="width: 250px"
      @keydown.enter.native="search"></el-input>
    <el-button type="primary" @click="dialog=true">新增</el-button>
    <el-table :data="userData" stripe style="width: 100%;">
      <el-table-column prop="account" label="账号">
      </el-table-column>
      <el-table-column prop="name" label="姓名"><template slot-scope="scope">
          <el-tag>{{scope.row.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间"><template slot-scope="scope">{{scope.row.create_time|formatDate}}</template>
      </el-table-column>
      <el-table-column prop="sex" label="性别"><template slot-scope="scope">
          <el-tag type="danger">{{sexName[scope.row.sex]}}</el-tag>
        </template></el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text">编辑</el-button>
          <el-button type="text" @click="delUser(scope.row.user_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="changeMaxSize" @current-change="changePageSize" :current-page="currentPage"
      :page-sizes="pageSizes" :page-size="pageSize" layout="total,sizes,prev,pager,next,jumper" :total="total">
    </el-pagination>
    <!-- 抽屉实现添加用户 -->
    <el-drawer
    title="新增用户"
    :before-close="cancel"
    :visible.sync="dialog"
    direction="ltr"
    custom-class="demo-drawer"
    ref="addDrawer">
    <div class="form-contaniner">
      <!-- 表单组件 -->
      <el-form :label-position="left" :model="user" :rules="rules" ref="addUser">
        <el-form-item label="账号" prop="account"><el-input v-model="user.account"></el-input></el-form-item>
        <el-form-item label="密码" prop="password"><el-input v-model="user.password" show-password></el-input></el-form-item>
        <el-form-item label="姓名" prop="name"><el-input v-model="user.name"></el-input></el-form-item>
        <el-form-item label="邮箱" prop="email"><el-input v-model="user.email"></el-input></el-form-item>
        <el-form-item label="手机号" prop="phone"><el-input v-model="user.phone"></el-input></el-form-item>
        <el-form-item label="性别:">
          <el-radio-group v-model="user.sex">
          <el-radio :label="0">保密</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收货地址" prop="address"><el-input v-model="user.address"></el-input></el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="addUser('addUser')">确认</el-button>
        </el-form-item>

      </el-form>
    </div>
    </el-drawer>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data() {
      return {
        userData: [],
        currentPage: 1,
        pageSizes: [10, 100, 200, 500, 1000],
        pageSize: 10,
        total: 400,
        sexName: ["保密", "男", "女"],
        likeName: "",
        dialog:false,
        left:"left",
        user:{
          account:"",
          password:"",
          name:"",
          email:"",
          phone:"",
          sex:0,
          address:"",
        },
        rules:{
          account:[{
              required:true,
              message:"用户账号不能为空",
              trigger:"blur",
            }],
          password:[{
              required:true,
              message:"用户密码不能为空",
              trigger:"blur",
            }],
          name:[{
            required:true,
            message:"用户姓名不能为空",
            trigger:"blur",
          }],
          email:[{
            type:"email",
            message:"用户邮箱格式不正确",
            trigger:"change",
          },{
            required:true,
            message:"用户邮箱不能为空",
            trigger:"blur",
          }],
          phone:[{
            required:true,
            message:"用户手机号不为空",
            trigger:"blur",
          }],
          address:[{
            required:true,
            message:"用户收货地址不为空",
            trigger:"blur",
          }]
        }
      }
    },
    components: {

    },
    methods: {
      //一页总能容纳的条数
      changeMaxSize(maxSize) {
        //默认接收到总条数，但是我需要总条数和当前页码
        let currentPage = this.currentPage
        let likeName = this.likeName
        this.getUserData(currentPage, maxSize, likeName)
      },
      //改变页码时
      changePageSize(currentPage) {
        // 默认接收的是改变的页面，但是我需要的是总条数和当前页码
        let maxSize = this.pageSize
        let likeName = this.likeName
        this.getUserData(currentPage, maxSize, likeName)
      },
      //get发送请求
      getUserData(page, maxSize, likeName) {
        let params = {
          page,
          maxSize
        }
        if (likeName !== "" && likeName !== null) {
          params['likeName'] = likeName
        }
        axios.get("http://chenxueli.site:8081/ssm/selectPageUserList", {
            params
          })
          .then((res) => {
            if (res.data.resultCode == 0) {
              let data = res.data.data
              //将列表数据赋值到data的userData属性中
              this.userData = data.list
              this.currentPage = data.pageNum //当前页码
              this.pageSize = data.pageSize //一页总条数
              this.total = data.total //总条数
            } else {
              alert(res.data.message)
            }
          })
      },
      search() {
        let maxSize = this.pageSize
        let page = this.page
        let likeName = this.likeName
        this.getUserData(page, maxSize, likeName)
      },
      // 删除用户功能
      delUser(userId) {
        let params = {
          userId
        }
        this.$confirm("此操作将会永久删除该记录,是否继续？", "提示", {
          confirmButtonText: "残忍丢弃",
          cancelButtonText: "容我在想想",
          type: "warning"
        }).then(() => {
          //点击确认后
          params = qs.stringify(params);
          axios.post("http://chenxueli.site:8081/ssm/deleteUser", params)
            .then((res) => {
              if (res.data.resultCode === 0) {
                this.$message({
                  type: "success",
                  message: res.data.message
                })
                let page = this.currentPage
                let maxSize = this.pageSize
                let likeName = this.likeName
                this.getUserData(page, maxSize, likeName)
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message
                })
              }
            })
        }).catch(() => {
          //点击取消
          this.$message({
            type: "info",
            message: "已取消删除！"
          })
        })
      },
      // 关闭抽屉
      cancel(done){
        done()
      },
      // 添加用户
      addUser(refName) {
        // 校验
        this.$refs[refName].validate((valid)=>{
            if(valid){
              // 校验成功，需要向服务发送请求进行新增
              let params = this.user
              params = qs.stringify(params)
              axios.post("http://chenxueli.site:8081/ssm/addUser",params)
              .then((res)=>{
                // 新增成功
                if(res.data.resultCode===0){
                  this.$message({
                    type:"success",
                    message:res.data.message
                  })
                  //抽屉内的内容全部清空
                  this.$refs[refName].resetFields()
                  // 关闭抽屉
                  this.dialog=false
                  this.getUserData(1,10,null)
                }else{
                  // 新增失败
                  this.$message({
                    type:"error",
                    message:res.data.message
                  })
                }
              })
            }else{
              return false
            }
        })
      },
    },
    mounted() {
      this.getUserData(1,10,null)
    },
    //过滤器
    filters: {
      formatDate(date) {
        return new Date(date).toLocaleString().replace(/:\d{1,2}$/, ' ')
      }
    }
  }
</script>

<style scoped="scoped">
  .form-contaniner{
    width: 100%;
    height: 500px;
    overflow-y: scroll;
  }
</style>
